<template>
	<view>
    <view class="map">
      <view class="section">
        <input v-model="value" @input="bindInput" placeholder="搜索" />
        <text @click="cancle">取消</text>
      </view>
      <view class="text_box flex justify-between flex-1">
        <view @click="()=>bindSearch()">当前定位：{{locationName}}</view>
        <view @click="getAddress">重新定位</view>
      </view>
      <view @click="bindSearch(item)" class="text_box" v-for="item,index in tips" :key="index">
        {{item.name}}
      </view>
      <!-- <map 
        v-show="isShowMap"
        :style="{top: navbarHeight + 'px'}"
        class="map_container"
        :latitude="latitude" 
        :longitude="longitude" 
        scale="11" 
        :markers="markers" 
        :show-location="true" 
        @tap="tap"
        >
        </map> -->
      </view>
    </view>
</template>

<script>	
import amap from '@/common/map/amap-wx.130.js';
import { topx } from "@/common/utils/utils.js"
// #ifdef MP
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// #endif
export default {
  data(){
    return{
      latitude:"", // 中心点
      longitude:"", // 中心点
      mapData:{}, // 当前定位
      markers:[], // 标点列表
      value: "", // 关键词
      locationName: "", // 已选定位名称
      poisData:[], // 周边定位列表
      tips:[], // 搜索列表
      // #ifdef MP
      menuButtonHeight: menuButtonInfo.height,
      statusBarHeight: systemInfo.statusBarHeight,
			// #endif
      isShowMap: true
    }
  },
  computed:{
			// 转换字符数值为真正的数值
			// #ifdef MP
			navbarHeight() {
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height+this.statusBarHeight+topx(80)
			}
			// #endif
  },
  watch:{
    // value(val){
    //   if(val.length){
    //     this.isShowMap = false
    //   }else{
    //     this.isShowMap = true
    //     this.tips = []
    //   }
    // }
  },
  onLoad(option){
    let location = JSON.parse(option.location)
    this.latitude = location.lat
    this.longitude = location.lng
    this.locationName = location.locationName
    if(!this.latitude){
      this.getAddress()
    }else{
      this.getPoiAround()
    }
  },
  // ...其他选项
  methods: {
    getAddress(){
        var that = this;
        this.value = ""
        const myAmapFun = new amap.AMapWX({
          key:'2d7598b3c967379ffd30b5ac841e6cbe'
        });
        uni.showLoading({
            title: '获取信息中'
        });
        myAmapFun.getRegeo({
          success: function(data){
            //成功回调
            console.log('当前定位', data);
            that.mapData = data[0];
            that.locationName = data[0].name;
            that.latitude = data[0].latitude;
            that.longitude = data[0].longitude;
            uni.hideLoading();
          },
          fail: function(info){
            //失败回调
            console.log(info)
            uni.showToast({
                title:"获取位置失败，请重启小程序",
                icon:"error"
            })
          }
        })
        this.getPoiAround()
    },
    getPoiAround(){
      var that = this;
      const myAmapFun = new amap.AMapWX({
        key:'2d7598b3c967379ffd30b5ac841e6cbe'
      });
      myAmapFun.getPoiAround({
        success: function(data){
          //成功回调
          console.log('周边定位', data);
          that.poisData = data.poisData.filter(item=>item.location && typeof item.location == 'string')
          that.tips = data.poisData.filter(item=>item.location && typeof item.location == 'string')
        },
        fail: function(info){
          //失败回调
          console.log(info)
        }
      })
    },
    // 点击地图增加标点
    tap(e){
      console.log(e);
      this.markers = [{
        latitude: e.detail.latitude,
        longitude: e.detail.longitude,
        width: 20,
        height: 40,
        id: this.markers.length
      }]
      this.latitude = e.detail.latitude
      this.longitude = e.detail.longitude
    },
    // 搜索
    bindInput(e){
      var that = this;
      var keywords = e.detail.value; 
      var myAmapFun = new amap.AMapWX({key: '2d7598b3c967379ffd30b5ac841e6cbe'});
      myAmapFun.getInputtips({
        keywords: keywords,
        location: '',
        success: function(data){
          console.log(data);
          that.tips = data.tips.filter(item=>item.location && typeof item.location == 'string')
        }
      })
    },
    // 点击搜索结果
    bindSearch(e){
      console.log(e);
      let location = {}
      if(e){
        let [ longitude, latitude ] = e.location.split(",")
        location = {
          latitude: latitude*1 ,
          longitude: longitude*1,
          name: e.name
        }
      }else{
        location = {
          latitude: this.latitude ,
          longitude: this.longitude,
          name: this.locationName
        }
      }
      uni.$emit("changeLocation", location)
      uni.navigateBack()
    },
    // bindSearch(e){
    //   console.log(e);
    //   let location = e.location.split(",")
    //   this.markers = [{
    //     latitude: location[1]*1 ,
    //     longitude: location[0]*1,
    //     width: 20,
    //     height: 40,
    //     id: this.markers.length
    //   }]
    //   this.latitude = location[1]*1
    //   this.longitude = location[0]*1
    //   this.locationName = e.name;
    //   console.log(this.markers);
    //   this.tips = this.poisData
    //   this.value = ""
    // },
    // 取消
    cancle(){
      uni.navigateBack()
    }
    // cancle(){
    //   this.tips = this.poisData
    //   this.value = ""
    // }
  }
}
</script>

<style lang="scss" scoped>
.map_container{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.section{
  display: flex;
  align-items: center;
  height: 80rpx;
  width: 100%;
  padding: 0 20rpx;
}
.section input{
  flex:1;
  border:2rpx solid #c3c3c3;
  height:60rpx;
  border-radius: 30rpx;
  padding: 0 20rpx;
  margin: 10rpx 20rpx 10rpx 0;
}
.text_box{
  margin: 20rpx 40rpx;
  border-bottom:2rpx solid #c3c3c3;
  padding-bottom:20rpx
}
.map{

}
</style>
